<template>
    <el-row class="container">
        <el-row class="crumbs">
            <!-- 酒店 <span>></span> 广州酒店如家 <span>></span> 快捷酒店(天河方舟园店) -->
            {{detail.breadcrumb}}
        </el-row>
        <el-row class="title">{{detail.name}}</el-row>
        <el-row class="desc">{{detail.alias}}</el-row>
        <el-row class="location"><i class="iconfont iconlocation"></i>{{detail.address}}</el-row>
        <el-row class="picWapper" type="flex" justify="space-between">
            <el-row class="big-pic">
                <img :src="chengeImg" alt="">
            </el-row>
            <el-row class="smallPicWapper" type="flex">
                <el-row v-for="item in imgArr" :key="item"
                ><img :src="item" alt=""  @click="changeImg(item)"/></el-row>
            </el-row>
        </el-row>
        <el-row class="tab">
            <el-table
            fit

            :data="detail.products"
            :highlight-current-row="true"
            >
            <el-table-column
                prop="name"
                label="价格来源"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="bestType"
                label="低价房型"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="price"
                label="最低价格/每晚"
                align="center"
                >
                <template slot-scope="scope">
                    <span style="color:#5F6266;font-size:16px;">
                        <b style="color:#FF9300;font-weight:400;margin-right:5px;">￥{{scope.row.price}}</b>起
                        <i class="el-icon-arrow-right" style="color:#FF9300;"></i>
                    </span>
                </template>
            </el-table-column>
            </el-table>
        </el-row>
        <el-row class="mapWapper">
            <DetailMap />
        </el-row>
        <el-row class="info">
            <el-row>
                <el-col :span="4" class="info-item">基本信息</el-col>
                <el-col :span="5" class="info-item">入住时间: 14:00之后</el-col>
                <el-col :span="5" class="info-item">离店时间: 12:00之前</el-col>
                <el-col :span="5" class="info-item">2010年开业 / 2010年装修</el-col>
                <el-col :span="5" class="info-item">酒店规模: 153间客房</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="info-item">主要设施</el-col>
                <el-col :span="5" class="info-item" v-if="detail.hotelassets[0]">{{detail.hotelassets[0].name}}</el-col>
                <el-col :span="5" class="info-item"></el-col>
                <el-col :span="5" class="info-item"></el-col>
                <el-col :span="5" class="info-item"></el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="info-item">停车服务</el-col>
                <el-col :span="5" class="info-item">-</el-col>
                <el-col :span="5" class="info-item"></el-col>
                <el-col :span="5" class="info-item"></el-col>
                <el-col :span="5" class="info-item"></el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="info-item">品牌信息</el-col>
                <el-col :span="5" class="info-item black" v-if="detail.hotelbrand">{{detail.hotelbrand.name}}</el-col>
                <el-col :span="5" class="info-item"></el-col>
                <el-col :span="5" class="info-item"></el-col>
                <el-col :span="5" class="info-item"></el-col>
            </el-row>
        </el-row>
        <el-row class="commentCountWapper">
            <span>0</span>条真实用户评论
        </el-row>
        <el-row class="commentStatisticsWapper">
            <el-col :span="4">
                <el-row class="count-item">总评数：{{detail.all_remarks}}</el-row>
                <el-row class="count-item">好评数：{{detail.good_remarks}}</el-row>
                <el-row class="count-item">差评数：{{detail.bad_remarks}}</el-row>
            </el-col>
            <el-col :span="20">
                <el-col :span="5" class="rate">
                    <el-rate :value="detail.stars" disabled></el-rate>
                    <span class="score">{{detail.stars}}分</span>
                    <div class="adv">推荐</div>
                </el-col>
                <el-col :span="19" class="propress">
                    <el-row class="propress-item">
                        <el-row class="desc" type="flex">
                            <span>环境</span>
                            <b>{{detail.scores.environment/10}}</b>
                        </el-row>
                        <el-progress type="circle" :percentage="detail.scores.environment" color="#FF9A10" :stroke-width="2" :width="70" :show-text="false"></el-progress>
                    </el-row>
                    <el-row class="propress-item">
                        <el-row class="desc" type="flex">
                            <span>产品</span>
                            <b>{{detail.scores.product/10}}</b>
                        </el-row>
                        <el-progress type="circle" :percentage="detail.scores.product" color="#FF9A10" :stroke-width="2" :width="70" :show-text="false"></el-progress>
                    </el-row>
                    <el-row class="propress-item">
                        <el-row class="desc" type="flex">
                            <span>服务</span>
                            <b>{{detail.scores.service/10}}</b>
                        </el-row>
                        <el-progress type="circle" :percentage="detail.scores.service" color="#FF9A10" :stroke-width="2" :width="70" :show-text="false"></el-progress>
                    </el-row>   
                </el-col>
            </el-col>
        </el-row>
    </el-row>
</template>

<script>
import DetailMap from '@/components/hotel/DetailMap'
export default {
    data(){
        return{
            detail:{
                breadcrumb:'',
                name:'',
                address:'', 
                alias:'',
                products:[],
                scores:{},
                hotelbrand:{},
                hotelassets:[
                    {name:''}
                ]
            },
            commentList:[],
            imgArr:[
                '/images/1.jpeg',
                '/images/2.jpeg',
                '/images/3.jpeg',
                '/images/4.jpeg',
                '/images/5.jpeg',
                '/images/6.jpeg'
            ],
            chengeImg:'/images/1.jpeg'
        }
    },
    components:{
        DetailMap
    },
    methods:{
        loadDetail(){
            this.$axios({
                url:'/hotels?id='+this.$route.params.id
            }).then(res => {
                this.detail = res.data.data[0];
                for(let key in this.detail){
                    if(key == 'scores'){
                        for(let item in this.detail[key]){
                            this.detail[key][item] = this.detail[key][item] *10;
                        }
                    }
                }
            })
        },
        loadComment(){
            this.$axios({
                url:'/hotels/comments'
            }).then(res => {
                this.commentList = res.data.data;
            })
        },
        changeImg(src){
            this.chengeImg = src;
        }
    },
    mounted(){
        this.loadDetail();
        this.loadComment();
    }
}
</script>

<style lang="less" scoped>
.container{
    width:1000px;
    margin:auto;
}
.crumbs{
    margin:20px 0;
    font-size: 14px;
    color: #5F6266;
}
.title{
    font-size: 24px;
    color: #333333;
}
.desc{
    color: #666666;
    font-size: 14px;
}
.location{
    color: #666666;
    font-size: 14px;
}
.picWapper{ 
    margin:42px 0;
    .big-pic{
        width:642px;
        height: 361px;
        img{
            width:100%;
            height:100%;
        }
    }
    .smallPicWapper{
        flex:1;
        display: flex;
        flex-wrap: wrap;
        margin-left: 24px;
        .el-row{
            flex:47%;
            width:160px;
            height: 112px;
            box-sizing: border-box;
            img{
                width:100%;
                height:100%;
            }
            &:nth-child(even){
                margin-left: 16px;
            }
            &:nth-child(-n+4) {
                margin-bottom: 12px;
            }
        }
    }
}
.tab{
    
}
.mapWapper{
    margin-top:40px;
    margin-bottom: 40px;
}
.info{
    margin: 40px 0;
    .el-row{
        height: 59px;
        line-height: 59px;
        border-bottom: 1px solid #EEEEEE;
        .el-col{
            font-size: 14px;
            &:not(:first-child){
                color: #666666;
            }
            &.black{
                color: #000;
            }
        }
    }
}
.commentCountWapper{
    font-size: 16px;
    color: #000;
    font-weight: 600;
}
.commentStatisticsWapper{
    margin:25px 0;
    .count-item{
        font-size: 16px;
        color: #666666;
    }
    .rate{
        position: relative;
        display:flex;
        justify-content: space-between;
        padding:20px 0;
    }
    .score{
        font-size: 14px;
        color: #FF9300;
    }
    .adv{
        position: absolute;
        top:0;
        left: 20px;
        border: 2px solid #fa3;
        text-align: center;
        line-height: 70px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        opacity: .25;
        transform: rotate(-30deg);
        font-size: 24px;
        color: #f90;
    }
    .propress{
        display:flex;
        .propress-item{
            position: relative;
            margin-left: 60px;
            .desc{
                flex-direction: column;
                justify-content: center;
                align-items: center;
                position: absolute;
                left: 20px;
                top: 15px;
                color: #FF9300;
                span{
                  font-size: 16px;
                }
                b{
                    font-size: 14px;
                    font-weight: 400;
                }
            }
        }
    }
}
/deep/.el-rate__icon{
    font-size: 22px;
}
</style>